<template>
  <div>
    <bread-crumb ref="breadcrumb" :item="item"></bread-crumb>
    <div class="common-wrapped">
      <div class="common-content">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="账号详情" name="first">
            <div class="account-info-wrapped">
              <span>用户头像</span>
              <div style="margin-left: 38px">
                <el-upload
                  class="avatar-uploader"
                  action="http://127.0.0.1:8099/user/uploadAvatar"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="store.imageUrl"
                    :src="store.imageUrl"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon"
                    ><Plus
                  /></el-icon>
                </el-upload>
              </div>
            </div>
            <div class="account-info-wrapped">
              <span>用户账号：</span>
              <div class="account-info-content">
                <el-input v-model="store.account" disabled></el-input>
              </div>
            </div>
            <div class="account-info-wrapped">
              <span>用户密码：</span>
              <div class="account-info-content">
                <el-button type="primary" @click="openChangePassword"
                  >修改密码</el-button
                >
              </div>
            </div>
            <div class="account-info-wrapped">
              <span>用户姓名：</span>
              <div class="account-info-content">
                <el-input v-model="store.name"></el-input>
              </div>
              <div class="account-save-button">
                <el-button type="primary" @click="saveName">保存</el-button>
              </div>
            </div>
            <div class="account-info-wrapped">
              <span>用户性别：</span>
              <div class="account-info-content">
                <el-select v-model="store.sex">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </div>
              <div class="account-save-button">
                <el-button type="primary" @click="saveSex">保存</el-button>
              </div>
            </div>
            <div class="account-info-wrapped">
              <span>用户身份：</span>
              <div class="account-info-content">
                <el-input v-model="store.identity" disabled></el-input>
              </div>
            </div>
            <div class="account-info-wrapped">
              <span>用户部门：</span>
              <div class="account-info-content">
                <el-input v-model="store.department" disabled></el-input>
              </div>
            </div>
            <div class="account-info-wrapped">
              <span>用户邮箱：</span>
              <div class="account-info-content">
                <el-input v-model="store.email"></el-input>
              </div>
              <div class="account-save-button">
                <el-button type="primary" @click="saveEmail">保存</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="second">
            <div class="account-info-wrapped">
              <span>公司名称</span>
              <div class="account-info-content">
                <el-input v-model="companyName"></el-input>
              </div>
              <div class="account-save-button">
                <el-button type="primary" @click="resetCompanyName"
                  >编辑公司名称</el-button
                >
              </div>
            </div>
            <div class="account-info-wrapped">
              <span>公司介绍</span>
              <div class="account-info-content">
                <el-button type="success" @click="openEditor(1)"
                  >编辑公司介绍</el-button
                >
              </div>
            </div>
            <div class="account-info-wrapped">
              <span>公司架构</span>
              <div class="account-info-content">
                <el-button type="success" @click="openEditor(2)"
                  >编辑公司架构</el-button
                >
              </div>
            </div>
            <div class="account-info-wrapped">
              <span>公司战略</span>
              <div class="account-info-content">
                <el-button type="success" @click="openEditor(3)"
                  >编辑公司战略</el-button
                >
              </div>
            </div>
            <div class="account-info-wrapped">
              <span>公司高层</span>
              <div class="account-info-content">
                <el-button type="success" @click="openEditor(4)"
                  >编辑公司高层</el-button
                >
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="首页管理" name="third">
            <div class="home-wrapped">
              <!-- 提示 -->
              <div class="tips">
                <span> 提示: 点击图片框进行切换首页轮播图 </span>
              </div>
              <!-- 轮播图 -->
              <div
                class="swiper-wrapped"
                v-for="(item, index) in swiperData"
                :key="index"
              >
                <div class="swiper-name">
                  轮播图{{ index + 1 }}:&nbsp;&nbsp;
                </div>
                <el-upload
                  class="avatar-uploader"
                  action="http://127.0.0.1:8099/setting/uploadSwiper"
                  :show-file-list="false"
                  :on-success="handleSwiperSuccess"
                  :before-upload="beforeAvatarUpload"
                  :data="item"
                >
                  <template #trigger>
                    <img
                      v-if="imageUrl[index]"
                      :src="imageUrl[index]"
                      class="swiper"
                    />
                    <img src="@/assets/雪碧图.png" alt="" v-else />
                  </template>
                </el-upload>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="其他设置" name="fourth">其他设置</el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 修改密码弹框 -->
    <changePassword ref="changePasswordRef" />
    <editor ref="editorP" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import breadCrumb from '@/components/bread_crumb.vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { userInfoStore } from '../../store/userInfo.js'
import type { UploadProps } from 'element-plus'
import { bind, changeName, changeSex, changeEmail } from '@/api/userInfo.js'
import changePassword from './components/change_password.vue'
import editor from './components/editor.vue'
import { bus } from '@/utils/mitt.js'

import {
  getCompanyName,
  changeCompanyName,
  getAllSwiper,
  setDepartment,
  getDepartment,
  setProduct,
  getProduct,
} from '@/api/setting'

const imageUrl = ref([])
const store = userInfoStore()
const changePasswordRef = ref('')
const handleAvatarSuccess: UploadProps['onSuccess'] = async (
  response,
  uploadFile
) => {
  if (response.status === 0) {
    // store.$patch({
    //   imageUrl: response.url,
    // })
    store.imageUrl = response.url
    ElMessage.success('更新头像成功')
    await bind(store.account, response.onlyId, response.url)
  } else {
    ElMessage.error('更新头像失败，请重新上传')
  }
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('头像必须是image/jpeg格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像必须小于2MB')
    return false
  }
  return true
}
interface UserData {
  account: number
  name: string
  sex: string
  identity: string
  department: string
  email: string
}
let userData = reactive<UserData>({
  account: null,
  name: '',
  sex: '',
  identity: '',
  department: '',
  email: '',
})
const item = ref({
  first: '第一个',
})
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const id = sessionStorage.getItem('id')
// 修改密码
const openChangePassword = () => {
  changePasswordRef.value.open()
}
// 修改姓名
const saveName = async () => {
  const res = await changeName(store.name, id)
  if (res.status === 0) {
    ElMessage.success('修改成功')
  } else {
    ElMessage.error('修改姓名失败，请重新输入')
  }
}
// 修改性别
const saveSex = async () => {
  const res = await changeSex(store.sex, id)
  if (res.status === 0) {
    ElMessage.success('修改成功')
  } else {
    ElMessage.error('修改性别失败，请重新输入')
  }
}
// 修改邮箱
const saveEmail = async () => {
  const res = await changeEmail(store.email, id)
  if (res.status === 0) {
    ElMessage.success('修改成功')
  } else {
    ElMessage.error('修改邮箱失败，请重新输入')
  }
}
let companyName = ref('')
const editorP = ref(null)
const openEditor = (value) => {
  bus.emit('editorTitle', value)
  editorP.value.open()
}

// 修改公司名字
const resetCompanyName = async () => {
  const res = await changeCompanyName(companyName.value)
  if (res.status == 0) {
    ElMessage({
      message: '修改公司名称成功',
      type: 'success',
    })
  } else {
    ElMessage.error('修改公司名称失败，请重新输入！')
  }
}

// 上传轮播图成功
const handleSwiperSuccess: UploadProps['onSuccess'] = (response) => {
  returnAllSwiper()
}

// 获取轮播图
const returnAllSwiper = async () => {
  imageUrl.value = await getAllSwiper()
}

// 首页管理
const swiperData = [
  {
    name: 'swiper1',
  },
  {
    name: 'swiper2',
  },
  {
    name: 'swiper3',
  },
  {
    name: 'swiper4',
  },
  {
    name: 'swiper5',
  },
  {
    name: 'swiper6',
  },
]
</script>

<style lang="scss" scoped>
// 外壳
.common-wrapped {
  padding: 8px;
  background: #f5f5f5;
  // 计算 减去了头部还有面包屑 + 2X8=16边距
  height: calc(100vh - 101px);

  // 内容
  .common-content {
    padding: 0 10px;
    height: 100%;
    background: #fff;

    // 账号信息外壳
    .account-info-wrapped {
      display: flex;
      align-items: center;
      padding-left: 50px;
      margin-bottom: 24px;
      font-size: 14px;

      // 账号信息内容
      .account-info-content {
        margin-left: 24px;
        margin-right: 16px;
      }

      // 按钮
      .account-save-button {
        margin-left: 16px;
      }
    }

    // 首页管理外壳
    .home-wrapped {
      padding-left: 50px;
      display: flex;
      flex-direction: column;

      // 提示
      .tips {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        span {
          font-size: 14px;
          color: silver;
        }
      }

      // 轮播图
      .swiper-wrapped {
        display: flex;
        margin-bottom: 16px;

        // 轮播图名字
        .swiper-name {
          font-size: 14px;
          margin-bottom: 24px;
        }

        .swiper {
          width: 336px;
          height: 96px;
        }
      }
    }
  }
}

// 其他设置
.other-set {
  padding-left: 50px;
  font-size: 14px;

  .department-set {
    margin-bottom: 24px;

    span {
      margin-right: 24px;
    }
  }

  .product-set {
    span {
      margin-right: 24px;
    }
  }
}

// 标签页
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

// 上传头像
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}

// 输入框的长度
:deep(.el-input) {
  width: 240px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>